<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .container {
        width: 1300px;
        height: 310px;
        margin: 50px auto;
        /* background-color: rgba(255, 51, 0, 0.507); */
        border: 2px solid royalblue;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .container .item {
        width: 250px;
        height: 150px;
        float: left;
        background-color: rgba(6 143 143 / 35%);

    }

    img {
        width: 100px;
        height: 150px;
        float: left;
        vertical-align: middle;
    }

    .container .name {
        font-size: larger;
    }

    .container button {
        background-color: brown;
        margin-top: 8px;
    }

    p {
        font-size: small;
    }

    span {
        color: red;
        margin-left: 6px;
    }

    a {

        margin: auto;
        width: 100px;
        background-color: rgba(29, 14, 235, 0.349);
        font-size: larger;
        display: block;
        text-align: center;
    }
</style>

<body>
    <a href="./cart.html">购物车</a>
    <div class="container">
    </div>
<!-- <script>
    let products = [
  {
    id: 1001,
    name: "你是谁",
    img: "./img/mmexport1631069880346.jpg",
    price: 35.86,
  },
  {
    id: 1002,
    name: "我是谁",
    img: "./img/mmexport1631069880346.jpg",
    price: 35.45,
  },
  {
    id: 1003,
    name: "他是谁",
    img: "./img/mmexport1631069880346.jpg",
    price: 45.89,
  },
  {
    id: 1004,
    name: "谁是谁",
    img: "./img/mmexport1631069880346.jpg",
    price: 75.65,
  },
  {
    id: 1005,
    name: "她是谁",
    img: "./img/mmexport1631069880346.jpg",
    price: 66.99,
  },
];
const container = document.querySelector(".container");
//添加图书
function showBook() {
  let str = "";
  products.forEach((item, index) => {
    let bookStr = ` 
  <div class="item">
  <img src="${item.img}">
  <div class="name">书名：${item.name}</div>
  <p>介绍：好好好好好好好好爱护，一定要啊不是吧真的吗，哈哈哈，以你的心诠释我的爱....</p>
  价格:￥<span>${item.price}</span>
  <button type="button" date-index='${item.id}' >添加到购物车</button>
</div> `;
    str += bookStr;
  });
  container.innerHTML = str;
}
showBook();
container.addEventListener("click", (e) => {
  e = e || window.event;
  let target = e.target || e.srcElement;
  if (target.nodeName == "BUTTON") {
    let id = target.getAttribute("date-index");
    console.log(id);
    let product=products.find(item=>item.id==id)
    product={
        ...product,
        num:1,
        singlePrice:product.price,
        state:false
    }
    console.log(product);
    //拿出数组
  let  Arr=JSON.parse(localStorage.getItem("CartList"))  || []
  console.log(Arr)
  let newProduct=Arr.find(item=>item.id==product.id)
  if(newProduct) newProduct.num++
  else  Arr.push(product)
  localStorage.setItem('CartList',JSON.stringify(Arr))
  }
});

</script> -->

    <!-- <script src="./js/index.js"></script> -->
<script src="./js/js.js"></script>
</body>

</html>